import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import Carousel from "@/components/home/carousel";
import Count from "@/components/home/count";
import './index.less'
import CustomBotton from "@/components/customBotton";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        return () => (
            <div class='home'>
                <div class='bg1'>
                    <div class='bg2'>
                        <div class='bg3'>
                            <div class='bg3_title exceed1 animate__animated animate__slideInUp'>{t('home.bg3_title')}</div>
                            <div class='bg3_sentence2 exceed1 animate__animated animate__slideInUp'>{t('home.bg3_sentence2')}</div>
                            <div class='bg3_sentence3 exceed1 animate__animated animate__slideInUp'>{t('home.bg3_sentence3')}</div>
                            <div class='bg3_sentence4 animate__animated animate__slideInUp'>
                                <CustomBotton title={t('home.free_experience')} className={'green'} />
                                <div class='apple_win'> <img src="/home/home_icon_apple_normal.png" alt="" /><img src="/home/home_icon_win_normal.png" alt="" /> </div>
                            </div>
                            <div class='bg3_sentence5 exceed1 animate__animated animate__slideInUp'>{t('home.bg3_sentence5')}</div>
                            <div class='bg3_sentence6 animate__animated animate__slideInUp'>
                                <img src="home/home_logo_binance.svg" alt="" />
                                <img src="/home/home_logo_okx.png" alt="" />
                                <img src="/home/home_logo_huobi.svg" alt="" />
                                <img src="/home/home_logo_dydx.svg" alt="" />
                                <img src="/home/home_logo_dodo.svg" alt="" />
                                <img src="/home/home_logo_kine.svg" alt="" />
                                <img src="/home/home_logo_pancakeswap.svg" alt="" />
                                <img src="/home/home_logo_uniswap.svg" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
                <Carousel />
                <Count />
                <div class='box4'>
                    <div class='box4_text'>
                        <div class='box4_text1 exceed2'>{t('home.box41')}</div>
                        <div class='box4_text2 exceed4'>{t('home.box42')}</div>
                        <div class='box4_text3'><span>{t('head.learn_more')}</span><img src="/home/box4right.svg" alt="" /></div>
                    </div>
                    <div class='img1'><img src="/home/box41.png" alt="" /></div>
                    <div class='img2'><img src="/home/box42.png" alt="" /></div>
                </div>
                <div class='box5'>
                    <div class='box5_left'>
                        <div class='title exceed1'>{t('home.box51')}</div>
                        <div class='content exceed3'>{t('home.box52')}</div>
                        <div class='bottom'>
                            <div class='learn_more'><span>{t('head.learn_more')}</span><img src="/home/box4right2.svg" alt="" /></div>
                            <img src="/home/home_box5@2x.png" alt="" />
                        </div>
                    </div>
                    <div class='box5_right'>
                        <div class='title exceed1'>{t('home.box53')}</div>
                        <div class='content exceed3'>{t('home.box54')}</div>
                        <div class='bottom'>
                            <div class='learn_more'><span>{t('head.learn_more')}</span><img src="/home/box4right2.svg" alt="" /></div>
                            <img src="/home/home_box56@2x.png" alt="" />
                        </div>
                    </div>
                </div>
                <div class='box6'>
                    <div class='box6_title exceed1'>{t('home.box6')}</div>
                    <div class='part'>
                        <div class='small'>
                            <img src="/home/box6/home_banner7@2x.png" alt="" />
                            <div class='title exceed1'>{t('home.box6Title1')}</div>
                            <div class='content exceed3'>{t('home.box6centert1')}</div>
                        </div>
                        <div class='small'>
                            <img src="/home/box6/home_banner8@2x.png" alt="" />
                            <div class='title exceed1'>{t('home.box6Title2')}</div>
                            <div class='content exceed3'>{t('home.box6centert2')}</div>
                        </div>
                        <div class='small'>
                            <img src="/home/box6/home_banner9@2x.png" alt="" />
                            <div class='title exceed1'>{t('home.box6Title3')}</div>
                            <div class='content exceed3'>{t('home.box6centert3')}</div>
                        </div>
                    </div>
                </div>
                <div class='box7'>
                    <div class='title exceed2'>{t('home.box71')}</div>
                    <div class='centent exceed3'>{t('home.box72')}</div>
                    <div class='bg3_sentence4 animate__animated animate__slideInUp'>
                        <CustomBotton title={t('home.free_experience')} className={'green'} />
                        <div class='apple_win'> <img src="/home/home_icon_apple_normal.png" alt="" /><img src="/home/home_icon_win_normal.png" alt="" /> </div>
                    </div>
                </div>
            </div >
        )
    }
})